<template>
    <fieldset>
        <legend>Product</legend>
        <ul>
            <li v-for="item in products" :key="item.id">
                <b>名称: {{item.title}} </b>
                |
                <b>价格: {{item.price}} </b>
                |
                <b>库存: {{item.inventory}} </b>
                |
                <button @click="add(item)" :disabled="item.inventory===0">点击加入购物车</button>
            </li>
        </ul>
    </fieldset>
</template>


<script>
// 引入actions的辅助函数
// 引入mapState的辅助函数

import { mapState , mapActions } from "vuex"
export default{
        methods: {
        add(item){
            this.ADD_TO_CART(item)
        },
        ...mapActions('product', ['FETCH_PRODUCT']),
        ...mapActions('cart',['ADD_TO_CART'])
        },
        computed: {
            ...mapState('product',['products']) //通过辅助函数映射product模块中的productData状态
        },
        mounted () {
            this.FETCH_PRODUCT()
        },
    }
</script>